// /**
//  * 监控组件
//  */
import React, { Component } from 'react';
import styles from './index.less';
import Title from '../../../commonComp/Title';
import ChartTitle from '../../../commonComp/ChartTitle';
import LetfChart from './components/LetfChart';
import FirstTable from './components/FirstTable';

export default class index extends Component {
  state = { height: 0 };

  componentDidMount() {
    this.setHeight();
    window.addEventListener('resize', this.eventHeight);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.eventHeight);
  }

  eventHeight = () => {
    this.setHeight();
  };

  setHeight = () => {
    const tableComp = document.getElementById('tableComp');
    this.setState({ height: tableComp.clientHeight });
  };

  render() {
    const { height } = this.state;

    return (
      <div className={styles.roots}>
        <div className={styles.title}>
          <div className={styles.titleLeft}>
            <Title title={'各组件异常次数分析'} />
          </div>
          <div className={styles.titleRight}>
            <Title title={'告警列表'} />
          </div>
        </div>
        <div className={styles.charts}>
          <div className={styles.left}>
            <ChartTitle title={'各组件异常次数'} />
            <div className={styles.leftChart}>
              <LetfChart height={height} />
            </div>
          </div>
          <div className={styles.right}>
            <div className={styles.context} id="tableComp">
              <ChartTitle title={'告警列表'} />
              <div className={styles.rightTable}>
                <FirstTable height={height} />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
